<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="修改手机号码" />
		<view class="container fboxCol Ycenter">
			<view style="height: 87rpx;"></view>
			<view class='title fboxRow Ycenter color-36363A font40'>修改手机号码</view>
			<!-- <view class="tips title font30 color-9899A1" wx:if="{{opMobile}}">原手机号({{opMobile}}）</view> -->
			<view style="height: 120rpx;"></view>
			<view class="input-item fboxRow Ycenter">
				<view class="icon mr24 color-9899A1"><text class="bksCIcon bks-c-a-ziyuan1shouji"></text></view>
				<input class="input-inner color-9899A1 font28 flex1" type="text" v-model="opMobile" disabled />
			</view>
			<view class="input-item fboxRow Ycenter">
				<view class="icon mr24 color-9899A1"><text class="bksCIcon bks-c-a-ziyuan1shouji"></text></view>
				<input class="input-inner font28 flex1" type="text" v-model="mobile" placeholder="请输入新手机号码" />
			</view>
			<view class="input-item fboxRow Ycenter">
				<view class="icon mr24 color-9899A1"><text class="bksCIcon bks-c-a-ziyuan1yanzhengma"></text></view>
				<input class="input-inner font28 flex1" type="text" v-model="smsCode" placeholder="请输入验证码" />
				<button class="btn-code font28 color-00C15D" v-if="!send" size="small" type="primary" @tap="sendCode">发送验证码</button>
				<button class="btn-code font28 color-00C15D" v-else size="small" type="primary">{{time}}S</button>
			</view>
			<button class='bottom font28' v-if="smsCode" :loading="loading" style="color:#fff" type='primary'
				@tap="bindMobile">验证并确定</button>
			<button class='bottom font28' v-else style="color:#fff" type='primary'>验证并确定</button>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import { userInfo } from '@/api/bks.mine'
	import { applet, appletOpenId,  getCode, bindSetMobile } from '@/api/bks.login'
	export default {
		components: { headerCustom },
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				isHide: false,
				isBtn: true,
				loading: false,
				code: '',
				"opendId": "",
				"unionId": "",
				opMobile: '',
				mobile: '',
				smsCode: '',
				send: false,
				time: 60
			}
		},
		onLoad: function(options) {
			const {bw_bks_user} = getApp().getBWData(['bw_bks_user'])
			console.log('onLoad',bw_bks_user)
			this.opMobile = bw_bks_user.mobile
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (!this.vaild(1)) {
					return false
				}
				if (!this.send) {
					this.send = true
					this.time = 60
					const timer = setInterval(() => {
						const time = this.time
						if (time > 1) {
							this.time= time - 1
						} else {
							this.send = false
							clearInterval(timer)
						}
					}, 1000)
					getCode({
						type: 'BANDING',
						mobile: this.mobile
					}).then(res => {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					})
				}
			},
			// 提交登录
			bindMobile() {
				if (!this.vaild(2)) {
					return false
				}
				const {
					smsCode,
					mobile,
					opMobile,
					opendId
				} = this
				// const fun =  opMobile ? bindMobile : bindNewMobile
				bindSetMobile({
					"code": smsCode,
					"newMobile": mobile,
					"oldMobile": opMobile,
					"openId": opendId
				}).then(res => {
					if (res.data) {
						this.submitLogin()
					}
				})
			},
			// 验证内容是否输入
			vaild(type) {
				const { mobile, smsCode } = this
				if (!mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					})
					return false
				}
				const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
				if (!reg.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return false
				}
				if (mobile == this.opMobile) {
					uni.showToast({
						title: '您新手机号码跟原手机号码一致',
						icon: 'none'
					})
					return false
				}
				if (type == 2) {
					if (!smsCode) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return false
					}
				}
				return true
			},
			// 提交登录
			submitLogin() {
				const data = {}
				// data.userInfo = this.data.userInfo
				data.openId = this.opendId
				data.unionId = this.unionId
				applet(data).then(res => {
					// 存入token
					try {
						wx.setStorageSync('bks_token', res.data.access_token)
					} catch (e) {}
					userInfo().then(res => {
						app.globalData.userInfo = res.data
						wx.setStorageSync('bks_user', res.data)
						// 跳转到考生首页
						wx.navigateBack({
							delta: 2,
							fail: () => {
								// 如果返回上一页没有那么跳转至考生首页
								wx.$common.pageTo('/pages/index/examinee/index', 'switchTab')
							}
						})
					})
					// studentInfo().then(res => {
					//   if (!res.data) {
					//     wx.$common.pageTo('/pages/mine/certification/index', 'reLaunch')
					//   }else{
					//     wx.navigateBack({
					//         delta: 2,
					//         fail: () => {
					//             // 如果返回上一页没有那么跳转至考生首页
					//             wx.$common.pageTo('/pages/index/examinee/index', 'switchTab')
					//         }
					//     })
					//   }
					// })
					this.loading = false
					this.index = 0
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					})
					this.loading = false
					this.index = 0
					if (err.code == 300523) {
						// wx.$common.pageTo('/pages/login/bind/index', {mobile: this.data.mobile})
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	/**index.wxss**/
	/* page{background:#30C377;} */
	
	.input-item{ width: 560rpx;margin-top: 20rpx;height: 88rpx;}
	.input-item .van-cell{padding-left: 20rpx;padding-right: 20rpx;}
	.input-item .bksCIcon{font-size:36rpx;color:#9899a1}
	.btn-code{background: none;}
	
	/* .logomain{height: calc(100vh);}
	.container{height: calc(100vh);} */
	.container .title{width: 560rpx; margin: 30rpx 0  0;}
	.container .bottom {margin-top: 105rpx; width: 560rpx;height: 80rpx;line-height: 78rpx; border-radius:8rpx;background-color:#00C15D !important;border: 0 none;}
	.container .bottom.border{background:none !important;border:1px solid #fff;color:#fff !important}
	
	.tips{margin-top: 30rpx;}
	.agreement{margin: 60rpx 0 30rpx;}
	.checkIcon{margin: 0 8rpx; width: 24rpx;height: 24rpx; border: 1px solid #00C15D;border-radius: 2rpx;}
	.checkIcon .bksCIcon{font-size: 12rpx;}
	/* .logomain{position: absolute;bottom: 50rpx;left: 0;} */
	.color-B8E6CE{color:#B8E6CE}
	.van-checkbox__label{margin-left: 0; color:#B8E6CE}
	
	
	.wrapper {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	
	.block {
	  width: 506rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	}
	.block .content{padding:0 30rpx;width: 506rpx;height: 160rpx; border-bottom: 1px solid #F0F0F5;}
	.block .bottom{width:253rpx;height: 82rpx;line-height: 82rpx; border:0 none !important;box-shadow: none !important;}
	.block .bottom:first-child{border-right: 1rpx solid #eee !important;}
</style>